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Websites bouwen met Expression Web — deel 1 


ledereen een website! 


Expression Web is de websitebouwer uit de nieuwe ontwerpsoftware- 
familie van Microsoft. In deze tweedelige testrit maken we een site voor 
Jan de Worstenman, een fictieve worstenfabrikant. 4 rreoeri meus 


NEE JAN, DE SALAMI VLOEKT 
NAAST DIE WITTE BEVLING !! 


WAT DOEN WE? | xpression is de nieuwe familie designsoftware van Microsoft. 


Het gezinnetje bestaat uit Expression Web, Studio, Blend, 
Designer en Media. Die laatste vier zijn vooral op professionele 
WAARMEE? ontwerpers gericht. Expression Web is zo’n beetje de opvolger van 
Microsoft Frontpage, maar dat is er niet aan te zien. De tool is im- 
mers een pak professioneler en uitgebreider dan zijn voorganger, 
HOELANG? en produceert ook kwalitatief betere resultaten. De rommelige 
html-code die Frontpage genereerde, behoort voorgoed tot het 
verleden. Expression Web leunt dicht aan bij Dreamweaver, het web- 
bouwpakket van Adobe, maar de leercurve is minder steil. Met deze 
cursus in de hand wordt het allemaal nóg makkelijker. In dit eerste 
deel bouwen we de basislay-out van onze site en voorzien we onze 


welkomstpagina van inhoud. WORSTEN BOER MAAKT WEBSITE 


MOEILIJKHEID? 


d 


INTERFACE 


Expression Web ziet er heel wat professioneler uit dan zijn voorganger, Hoewel gebruikers van Dreamweaver wel een aantal herkenningspunten 
waardoor de interface in het begin wat overdonderend kan overkomen. _ zullen tegenkomen, is een kleine landkaart dus toch op zijn plaats. 
@ Dit is het werkblad. Hier ontwerp je je pagina's. 


5 Woemenks and Settings\Clickx\Mijn documenten\site1 - Microsoft anssen Web slee) onderasn inbe heb je de keuze Hiesen Den San 
… Eile Edit View Insert Format Tools Table Site DataView TaskPanes Window Help a quest t hd 
D-:dà- IL Ì ll Joes sues sten Y-A- aeg en Cope, waarmee je respectievelijk je site te zien 


Dx ||{ aa web Site | Toolbox ax] krijgt terwijl je er aan werkt (WYSIWYG, zoals in 

MI | Contents of ‘C:\Documents and Settings\Clickx\Mijn documentenisite1” as Ennn Frontpage), een zicht op de code én het ontwerp 

tegelijk (het beeld wordt dan horizontaal in het 
midden verdeeld) of de code alleen. 

€ 3) @ De Forper List geeft je een overzicht van de 
bestanden en mappen die deel uitmaken van je 

1 website, op de manier die je van Windows Verken- 


Name Size Type Madified Date Modified By 


ner gewoon bent. Hierin verschijnen alle docu- 
menten die deel uitmaken van je website. Al die 
te bestanden zal je later moeten uploaden naar je 
CSS Properties Ox There are no files in this folder, 9 a n 5 
Tag Properties \{C55 Properties <_X webruimte om je website publiek te maken. 
El © De Toorzox is erg belangrijk. Van hieruit kan je 
de verschillende elementen waarmee je je pagi- 


Current Rule 
CSS Properties 5 na’s zal opbouwen, naar het werkblad slepen. 
@ In het Taa Properrties-kadertje kan je de eigen- 


schappen van zogenaamde tags en afbeeldingen 
4) Q bekijken en wijzigen. 
© Het SryLes/Lavers-kadertje geeft je een over- 


< > zicht van de css-opmaakstijlen die je gebruikt en 
Garolders Remote Web Site BReports B Hyperlinks aanne ” de layers of containers op je pagina. 
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Downloaden 


Expression Web heeft een adviesprijs van € 299, maar met de gratis 
probeerversie kan je al 60 dagen verder. Je vindt het 200 MB grote 


installatiebestand op [www.microsoft.com/products/expression/en/expression- 


web/free-trail.mspx. Onderaan die pagina moet je klikken op Exeresston Weg 


Important! 


® Install Microsoft „NET Framework 2,0 (see below) before installing Expression 
Web, 

® Uninstall all Microsoft Office 2007 beta programs before installing Expression Web 
Trial, 

® Get a product key to activate the trial, 


Microsoft ‚NET Framework 2.0 (22,5 MB) 
Expression Web Trial (200 MB) 


Hier vind je de downloadlinks naar Expression Web, versie 2.0 van het ‚NET 
framework en een productsleutel om je probeerversie te activeren. 


Installeren 


a. Ook op Clickx-cd 

I= Vind je 200 MB toch wat veel om te downloaden, en heb je 
nog even geduld, dan kan je wachten op de cd-rom bij Clickx 

145. Daar hebben we namelijk het installatiebestand van Expres- 

sion Web op gezet. 


Trra.. Je komt dan terecht op een downloadpagina, waar je in de 
groene balk op de Conrinve-knop moet drukken. Op de volgende pagina 
vul je je gegevens in en druk je onderaan op Continue. Ga vervolgens 
naar je mailbox en open de mail van Microsoft. Klik op de link, en je 
browser wordt geopend. Klik nu op de knop Conrinve. Vervolgens kom 
je opnieuw op de eerste downloadpagina terecht, waar de Continue-knop 
heeft plaatsgemaakt voor een DownLoap-knop. Als je daar op drukt, kan 
het binnenhalen eindelijk beginnen. Terwijl dat bezig is, kan je op onze 
site bij de Aanvuirers van dit nummer ook het bestand 
EXPRESSIONWEB.ZIP afhalen. Dat bevat een Word-document en enkele af- 
beeldingen die je zal nodig hebben. De html-bestanden van ons eindre- 
sultaat krijg je er gratis bij. 


Microsoft Expression Web Free Trial Product Key 


Thank you For trying Expression Web. 


Als je het bestand WesDesraner.exe hebt binnenge- 
haald, dubbelklik je erop om de installatie te star- 
ten. Heb je het „NET Framework 2.0 van Microsoft 
niet op je computer staan, dan zal de wizard je 
hierop wijzen en zichzelf afsluiten. Een linkje naar 
dat framework vind je op de downloadpagina van 
Expression Web, net boven de link van het pro- 
gramma zelf. Zodra je de installatie van Expression 


Die vind je door opnieuw naar de downloadpagina 
te gaan en boven de link naar het .NET framework 
op Propuct Key te klikken. Mensen die het pro- 
gramma gekocht hebben, moeten ook nog een 
‘referral key’ ingeven. In het volgende venster zet 
je een vinkje bij I ACCEPT THE TERMS OF THIS AGREEMENT 
en klik je op Continue. Daarna druk je op de grote 
knop InstauL Now om de eigenlijke installatie te 


To activate your free tried, please enter the test belou and chek Submit. 


Poase enter the text you soe bekous: 


ca Submit 


caPX 


Chek hare f vou cannot read the detorted text above 


Zodra je bewezen hebt dat je geen compu- 
ter bent, krijg je een productsleutel om je 


Web begint, vraagt de wizard om een Product Key. starten. 


Een nieuw project beginnen 


Voor je aan de eigenlijke website kan beginnen, moet je een nieuw pro- 
ject aanmaken. Dat doe je door in de menubalk bovenaan te kiezen voor 
Fire, New, Weg Sire. Vervolgens krijg je de keuze tussen GeneraL en Tem- 
PLATES. Met GeneraL kan je een lege website van een of meerdere pagina’s 
aanmaken, of een andere website die al op je computer staat importeren. 
TempLATes zijn afgewerkte voorbeeldsites, waarvan je de lay-out en de 
inhoud kan bewerken. Wij beginnen met een leeg blad; klik dus in de 
linkerkolom op GENERAL en in de middelste kolom op Emery Weg Sire. Onder- 
aan het venster kan je de map kiezen waarin je site bewaard moet 


Page | Web Site 


VE) One Page Web Site Description 
&l Empty Web Site Create a new Web site with nothing in it. 
Ja) Import Web Site Wizard 


General 


Templates 


Options 
Add to current Web site 


Specify the location of the new Web site: 


C:\Documents and Settings\CliekMijn documenten\Jan de Worstenmanl î 


vl) aow. } 


Vergeet onderaan niet in te geven waar je je website wil bewaren. 


exemplaar te registreren. 


worden. Die map wordt ook meteen de naam van je stek. Welke naam je 
kiest, is niet belangrijk. Alleen als je meerdere sites gaat bouwen, kan 
een goede naam handig zijn om het overzicht te bewaren. Met een klik 
op OK wordt de map aangemaakt en kan het echte werk beginnen. 


VAKTAAL 


CSS: Cascading Style Sheet. Met een stylesheet (css) kan je makkelijk het uitzicht van je 
webpagina's bepalen, zoals hoe titels, kadertjes of tekst er precies moeten uitzien. Je kan 
bijvoorbeeld eenvoudig bepaalde stijlen wijzigen om alle titels in je website een andere 
kleur te geven. 


INTERFACE: De interface van een computerprogramma is wat de eindgebruiker ziet op 
het scherm. Dat kan een ‘moderne’ interface zijn met veel knoppen en kleurtjes, of een 
‘ouderwetse’ interface in DOS. 


TAG: Speciale opmaakcode van elke webpagina. De lay-out van een webpagina wordt be- 
paald door tags. Zo is er de <b>-tag die ervoor zorgt dat een woord of zin in het vet (bold) 
weergegeven wordt. 


WYSIWYG: What You See Is What You Get. Met een WYSIWYG-editor zie je meteen hoe het 
eindresultaat er zal uitzien. Je moet met andere woorden geen ingewikkelde code gebruiken, 
maar je bekijkt onmiddellijk het resultaat. Veel webbouwpakketten zijn uitgerust met een 
WYSIWYG-module, maar ook tekstverwerkers als Word zijn WYSIWYG-programma's. 
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Een nieuwe pagina aanmaken 


Page | Web Site 


Om een nieuwe pagina aan te maken, klik je in het Fire-menu op 


en Saneral | TJ Two columns, left fixed Description 
New en daarna op Pace. Vervolgens krijg je een keuzevenster waar | Ie Two columns, right Fixed oe a page baadt that ge ä 
Ree 3 7 ; | igati te 
je uit allerlei soorten webpagina's kan kiezen. Met CSS Lavours ASP.NET ed Three columns le en nn 
IN cs g à | Id Header, nav, 1 column, Footer 
kan je bijvoorbeeld kiezen uit enkele vooraf gemaakte lay-outs Mn 
Ki a) E CSS Layouts IS Header, nav, | 

die opgebouwd werden met css, terwijl Frames Paces je de keuze iÂ Header, nav, 2 columns, Footer Predien 
geeft uit een aantal lay-outs die bestaan uit verschillende frames Style Sheets aal Header, nav, 3 columns, footer 

5 8 | äl Header, logo, 2 columns, footer 
of vensters. We houden het voorlopig op een gewone html-pagina. Frames Pages BI Header, logo; 3 columns, footer 


Klik in de linkerkolom op GENerAL en in de middelste kolom op 
HTML. Met een klik op OK wordt de pagina aangemaakt en kan 
je op het werkblad beginnen creëren. 


Options 
Page Editor Options. … 


a... Regelmatig bewaren 


== Zoals dat met elk computerprogramma het geval is, doe 
je er goed aan je vorderingen regelmatig te bewaren. Kies in 
het Fire-menu voor Save As en noem je eerste pagina INDEX.HTM 
Of DEFAULT.HTM. De pagina met die naam zal door browsers her- 
kend worden als de startpagina van je stek. Je andere pagina’s 
kan je namen geven zoals je zelf wil. 


Expression Web zit vol kant-en-klare lay-outs die je volledig naar je hand kan zetten. 


Afbeeldingen opslaan 


General | Formatting || Advanced || Custom || Language | Workgroup Als je afbeeldingen hebt ingevoegd en je je vorderingen wil opslaan, zal 
Expression Web aanbieden om de gebruikte plaatjes te bewaren in de 
map van je website. Dat doe je best, om te vermijden dat je site ontsierd 
wordt door rode kruisjes zodra je hem op je webruimte gooit. Om alles 
overzichtelijk te houden, maak je best ook een aparte map aan voor 
de foto’s. In het Save Emgepeo Fiies-kadertje, dat verschijnt zodra je je 
vorderingen bewaart, klik je daarvoor onderaan op de knop Chance 


Page Properties 


Location: unsaved:{fUntitled_2.htm ei 
Title: Jan de Worstenman Î 


Page description: Dit is de site van Jan de Worstenman, al 40 jaar uw 


pr 
z 
Keywords: worsteh, salami, chipolata, braadworst, pensen, es 
blaedpens, witte pens, andouillette, gerookte worst, v 


Base location: 


Alien | Forper. In het volgende kadertje klik je rechtsboven op het mapicoontje 
met een glinstering, om een nieuwe map aan te maken. Geef die map 
Background sound een logische naam, zoals AFBEELDINGEN, en selecteer ze. Klik daarna op 
SaRA OK. Klik nog eens op OK om de aangebrachte veranderingen (en de 
Loop: | Forever plaatjes) op te slaan. In de Forper Lrst linksboven zie je nu dat er een 
map AFBEELDINGEN is bijgekomen. Als je de map uitvouwt, zie je de afbeel- 
dingen staan. 
‘Page description’ is het korte blokje tekst dat je in Google onder _ _ 
elk zoekresultaat ziet. Save Embedded Files 
Je pagina een identiteit geven Change Folder 
Voor je inhoud in je pagina giet, kan je hem al een paar eigen- Laokin: _ |@ C:\Documents and SettingslCliladWijn do % 
schappen meegeven. Klik in het Fie-menu op Properties, geef ne Title 
je pagina een titel en een korte beschrijving, en schrijf enkele mm, afbeeldingen 


sleutelwoorden in het veld Kevworps. Een achtergrondgeluid 
(Backerounp sounD) werkt bezoekers meestal alleen maar op de 
zenuwen, dus dat veld laat je leeg. In het tabblad ForMatrina 
zet je een vinkje bij Backerounp picture. Met de knop Browse ga 
je op zoek naar het bestand AcHteraronD.Jpa. Bij CoLors verander 
je de HvperLink-kleuren allemaal in wit; alleen HoverED HYPERLINK 
maak je geel. Op het tabblad Apvancep ten slotte, kan je vier 
Mareins ingeven. Dat is de witruimte die je browser zal weer- 


geven rond de eigenlijke website. Best zet je die marges dus 


allemaal op nul. Om alles te bevestigen, druk je op OK. 


Zeker voor uitgebreide websites brengen mappen orde in de chaos. 
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Containers invoegen 


Om onze site op te bouwen, gaan we containers of Layers gebruiken. 
Dat zijn vakjes die je een heel precieze plaats op de pagina kan geven, 
om ze vervolgens op te vullen met tekst en beeld. Zorg dat je werkblad 
in Desren-weergave staat. Dat kan je zien onderaan het werkblad, aan 
de linkerkant van de horizontale schuifbalk. Neem een Laver vast in de 
Toorsox aan de rechterkant en sleep hem op het werkblad. Zo wordt er 
een container aangemaakt die 100 pixels hoog en even breed is. Licht- 
blauwe lijntjes geven aan waar het midden van elke zijde is. In deze 
container plaatsen we straks de hoofding en de navigatiebalk van onze 
site. De afbeelding van de hoofding is 100 pixels hoog en 750 pixels 
breed, terwijl het menu, dat we onder de hoofding plaatsen, een 
hoogte van 125 pixels meekrijgt. We gaan dus de afmetingen van de 
container wat moeten aanpassen. Dat doe je links onderaan bij de CSS 
Properties. Klik op de container om hem te selecteren en verander de 
waarde van Wiptn in 750px, de breedte van onze hoofding. Bij Herent 
geef je 125px in, zodat de hoofding en de menubalk netjes onder elkaar 
in de container passen. 


Aen) 
ziel 
ope es 


<rine she > <body> 
crineste > chvemyers> 


€55 rooerzen 


Grap bond or rens roo hy to mot. Orag marn hards to 1eene mangs. Free Vault: On Se hechtere Ako ZO Rwdwd Ex MIMIOT CS521 


Om de inhoud van je site in het gareel te houden, stop je ze in containers. 


a. Grote afbeeldingen 


Als je een afbeelding invoegt die groter is dan de container 
waar hij in geplaatst wordt, zal die container zichzelf automatisch 
vergroten. Is de afbeelding kleiner dan de container, dan behoudt 
die zijn grootte. 


ALTERNATIEVE TEKST 


Als mensen met een trage verbinding je site bezoeken, 
kan het wel even duren eer de plaatjes geladen zijn. 
Aan de hand van de alternatieve tekst kunnen ze dan 
meteen zien wat de functie van een bepaalde afbeel- 
ding is. Ook voor blinde en slechtziende bezoekers kan 
de alternatieve tekst handig zijn. Zij gebruiken vaak 
immers zogenaamde screenreaders. Dat zijn tooltjes 
die websites als het ware voorlezen. Dan is het handig 
om een korte beschrijving voor de afbeelding in te 


Plaatsen toewijzen 


Je kan containers naar hartenlust 
verslepen door ze vast te pakken bij 
de zijkanten of aan hun naamkaartje 
— in de linkerbovenhoek, nadat je ze 
geselecteerd hebt. Maar je kan ze ook 
exact vertellen waar ze moeten staan. 
De container van de hoofding moet 
helemaal bovenaan het venster en 
liefst ook volledig tegen de linkerkant 
komen. In het kadertje CSS Properties 
geef je daarom de velden Lerr en Top 
de waarde Opx. Dat is de afstand die 
de container respectievelijk van de 
linker- en de bovenkant van het ven- 
ster zal aannemen. De velden zijn al- 
fabetisch gerangschikt, maar alle vel- 
den die je een waarde meegeeft, 
worden nadien in vette blauwe letters 
bovenaan gezet. 


CSS Properties jm| 
(Taa Properties \CSS Properties 


ER KAN ed 

Applied Rules 
<inlinestyle > <body> 
<inlinestyle > <div#layer1> 


CSS Properties 
tont-style 


font-variant 
font-weight 
left Opx 
letter-spacing 
line-height 

tl list-style 


Met css kan je onnoemelijk veel eigen- 
schappen aanpassen. 


bouwen, zodat zij weten waar de afbeelding voor dient. 
Die alt-tekst moet in dat geval wel een betekenis heb- 
ben. Gaat het om puur decoratieve afbeeldingen, dan 
laat je hem best leeg, zodat de screenreader het 
plaatje overslaat. 


Afbeeldingen invoegen 


«| \<body>| <divstlayer > 


jan de‘worstenm; 


waareen worst is, 


Tussen de tabbladen en het werkblad heb je een broodkruimelspoor waar- 
mee je de verschillende onderdelen van je pagina kan selecteren. 


Een paar afbeeldingen kunnen een site behoorlijk opfleuren, al moet je 
niet overdrijven. In de hoofding plaats je de afbeelding Hoorina.spe. Dat 
doe je als volgt: klik in de container en druk vervolgens in de menubalk 
bovenaan op Insert. In het uitklapmenu kies je achtereenvolgens Picture 
en From rite. Ga op zoek naar de afbeelding en druk op Insert. Je krijgt 
een venstertje te zien waar je een ALTERNATE TEXT en een beschrijving 
van het plaatje kan invoegen. Die beschrijving is niet meteen nodig, 
maar we raden je wel aan om de ALTERNATE TEXT in te voegen, waarbij je 
het plaatje omschrijft. In dit geval is dat dan “hoofding Jan de Wor- 
stenman”. Waarom je dat best doet, lees je in het kadertje ‘Alterna- 
tieve tekst’. 


maart venten tand monden vat Get B 
e+-e 


Services 
Vellowpipe Web 


Free Tutorials 
Newsletters 


Zo ziet de Clickx-site eruit in de tekstbrowser {°° 
Lynx. Zoals je ziet bij [4] en [5] kan een duide- 
lijke alt-text een wereld van verschil betekenen. 


Domains 
Buy a domain 


name 
Check avallablity 


man 
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Kadertjes… …en kleurtjes 


WebSite |lindex.htm* XxX 


«| {<body> < 
div#layer1.style1 


Met een klik op het tabblad Shapine komen we aan de kleurtjes 
toe. Met BackarounD coLor bepaal je de achtergrondkleur van je 
kader, en met Forearounp coLor de kleur van de tekst die er in staat. 
el = ° en Laat je de instellingen op Automatic staan, dan neemt het kader 
gewoon de achtergrond- en tekstkleur van de rest van je pagina 
over. Als achtergrondkleur kies je het donkerrood, wat Maroon 
heet. De voorgrondkleur maak je wit. Gebruik je toch liever een 
afbeelding als achtergrond, dan kan je die hier alsnog invoegen 
De container is pas geselecteerd als er een lichtblauwe waas over ligt. Is dat met een druk op Browse. Alles bevestigen doe je zoals gewoonlijk 
niet het geval, dan zullen je veranderingen weinig uithalen. met OK. 


Borders and Shading 
Onder de afbeelding van de hoofding hebben we nog plaats gelaten voor 


het menu. Om onze site niet te overladen met afbeeldingen, gaan we 
de container gewoon inkleuren. Selecteer hem door op de rand te klik- 
ken (er moet een donkere doorzichtige laag overkomen) en klik ver- 
volgens in de menubalk bovenaan voor Format. In het uitklapmenu kies md 
je Borpers AND SHapinG. Standaard wordt het Borpers-tabblad geopend, horegaund cor; 

waar je je container van een kadertje kan voorzien (zoals je dat bij- 
voorbeeld gewoon bent van Word). Onderaan kan je de Pappine-opties 
aanpassen. Hiermee bepaal je de afstand tussen de inhoud van de 
container en de randen, maar dat hebben we nu niet nodig. We gaan oe 


ook geen kader gebruiken, dus in het SrvLe-kader laat je gewoon None d 
t g 9 5 Je g Background picture: | 
staan. _ 


| Borders | Shading 


Fill Preview 


Background color: 


Menu-items invoegen 


Dit soort kadertjes ken je na jaren tekstverwerken in Word misschien 
al van buiten. 


Tekst invoegen gaat erg makkelijk: klik met de cursor in een 
container en begin gewoon te typen! Best druk je eerst eens op 
Enter, zodat je zeker bent dat de menu-items onder de hoofding 


komen. We houden het menu simpel: typ achtereenvolgens WeLkom, Linken naar nieuwe pagina's 


Worsten, BESTELLEN en Contact. Druk tussen elk item drie keer op de 


Tag-toets, zodat ze netjes op een afstand van elkaar komen te New 

staan. Om het menu mooi uit te lijnen, druk je bovenaan op Cen- page | Web Site 

TREREN — een knop die je ook van Word kent. Menu-items staan erg En (TJ one Page web Ste | Description 

mooi in een menubalk, maar als je er niet op kan klikken, ben je Empty web ste | meenemen. 


| Templates LJ Import Web Site Wizard 


er natuurlijk niet veel mee. Selecteer het eerste menu-item (Wet- 
Kom) en ga in de menubalk bovenaan op zoek naar Insert. In het pe 

} 5 ER ptions 
uitklapmenu selecteer je vervolgens Hyper ink. Dit item moet naar add to current Web site 


de welkomstpagina verwijzen. Selecteer dus het bestand INDEX.HTM | JL 
en druk op OK Specify the location of the new Web site: 
C:\Documents and Settings\Clickx\Mijn documenten\Jan de Worstenmanl pe Browse... 


E 
ja n de’ Wo ge ten mi Als je de nieuwe pagina meteen wil bewerken, stip je het onderste bolletje aan. 


waareen worst is, is 


De pagina’s waar de andere menu-items naar verwijzen, hebben we nog 
aen niet aangemaakt, maar dat is geen probleem. Selecteer het tweede menu- 
| ieden (a Cipeamerts me setrgshdindane |B) OE item en klik opnieuw op Insert, HyperLinK. Dit keer klik je in de linkerkolom 
| „heesters [UT (Link To) op CREATE NEW DOCUMENT. Geef het een logische naam en stip onder 
afboekingen Terget Frame. 2 

e nnen de blauwe woorden WHEN To epit de optie Epi THE DOCUMENT LATER aan. Daar- 


Creemers $ : } 
| mee wordt er een nieuwe pagina aangemaakt, maar wordt deze niet 


Insert Hyperlink 


geopend op het werkblad. Met een druk op OK is de link gemaakt en zie 
Links invoegen is rdenhen je de nieuwe pagina in de Forper List aan de linkerkant. Doe hetzelfde met 
het laatste menuonderdeel. Als je naar een e-mailadres wil linken, dan 
moet je in de linkerkolom kiezen voor E-maiL Apress. 


doodeenvoudig. 
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Orog mang handles to reste mangs Press SHPT or CTRL fen mere ptn. 


a... Layers-tabblad 


== Als containers elkaar overlappen, kan het 
lastig zijn om ze te selecteren. Klik in de menu- 
balk bovenaan op Task panes en selecteer vervol- 
gens Lavers. In het kadertje rechts onderaan, 
onder de Toorgox, krijg je nu het Lavers-tabblad te 
zien, waar je de afzonderlijke containers kan se- 
lecteren door op hun naam te klikken. 


op de rite van Jan de Worsteseman Al4O jaae can u 
ales wat ook maar an de verte met warmen te 

deg voor op uw broed over Mordyeesen tet de 
tv ven Iet ahead bij Jan de Worsteseman 


wad een bft roet oren prodeten en ver 
‘oi een besteling plaatser op de Beselen- 
ernren wij grati aa bras bezen een straal va 
el 


verzoek of geween ter vang, dae kan w cas 
of maden. Tet benerkont 


“CEO oo < » 


adds: Om Pe kockstere Ate SIB Pwdrd EL2MS MIMLAT CZL 


Voorvertoning 


Tijd om de website eens te bekijken in je browser. Dat doe je door in 
het menu Fire onderaan te klikken op Preview in BROWSER. Voor je dat kan 
doen, moet je wel je pagina bewaren. Als je dat niet doet, zal Expres- 
sion Web je vragen of het bestand bewaard mag worden. Afhankelijk 
van hoeveel browsers je op je systeem hebt staan, is de keuze best 
uitgebreid. Je kan namelijk kiezen uit de geïnstalleerde browsers in 
jouw schermresolutie, maar je kan je site ook openen in een browser- 
venster met een andere resolutie. Zo krijg je een idee wat mensen met 
die resolutie wel of niet van jouw site te zien krijgen. Wil je je site in 
meerdere browsers tegelijk testen, dan kies je gewoon voor PREVvIEw IN 


MULTIPLE BROWSERS. 


CSS Praperzes Brevier in Niakiche Browsers (1024 x 768) 
Voor elk wat wils. sm _ Ek Orouser ut… 


Inhoud toevoegen 


De hoofding en het menu zijn af; nu moeten we enkel nog 
inhoud toevoegen. Als je wil, kan je de pagina nu ook al 
bewaren als (bijvoorbeeld) dummy.html, zodat je voor de 
volgende pagina’s niet van nul moet beginnen. Sleep twee 
containers naar het werkblad van je welkomstpagina. De 
eerste maak je 350 pixels hoog en 430 pixels breed, en de 
andere wordt 330 pixels hoog en 250 pixels breed. Om ze 
mooi op de pagina te plaatsen, verander je de waarde van 
Lert in 20px voor de eerste container en 475px voor de 
tweede. Top verander je voor beide naar 170px. In de lin- 
kercontainer plaatsen we nu een welkomstwoord. Kopieer 
uit WORSTENMAN.Doc de tekst onder de hoofding Wetkom (ko- 
pieer de hoofding mee), selecteer de linkercontainer en 
kies in het Eprr-menu voor Paste Text. In het volgende ven- 
ster selecteer je NoRMAL PARAGRAPHS WITH LINE BREAKS OM de 
paragrafen te behouden. Selecteer vervolgens de rechter- 
container en voeg de afbeelding Jan.Jpe in. 


Zo zou je scherm 
er ongeveer 
moeten uitzien. 


L Mell Frofen 2.0.0.3 eiè 
2 Mierosaft Internat Explorer 6.0 (640 « 480) 
3 Mieroseft Internet Explorer é.0 (BOO x 600) 
AMeroseft Inkerret Explorer 6.0 

SE Mieroseft Internat Explorer 6.0 (1024 x 768) 
6 Mella Frofox 20,0.3(£A0 4480) 

Z Mola Frofon 2.0.0.3 (800 « 600) 

B Moeda Profane 2.0.0.3 (102 1 268) 
Brenvierrr in Miakighe Browsers 
Brevier in Miche Browrsers (640 x 40) 
Brevier in Makiche Browsers (BOO x 600) 


ELEEEEER 


Jant de Wustenmmen | weta” - Wazilla Telen 
etend besten oet Geschmhers Wadenes Eon LD 


eon 


jan de‘worstenman 


IK Farrea nd Ch nen dn Pdre en ib) le 


Beze bezoeker 


Vanharte welkom op da cite van Jan de Worstermman. ALA) jaar aa « 
Mi ons serech voor slee wat ach maaar van ver mat worrten te maken 
zeeft Van beleg voor op vr bezad over biosdparsen tet de slede 
battecsemorst v ard het eraa bj Jan de Wersenenan. 


Op de Woesten pags viach w van kj cent eran peedacten es ham 
zajtes U kan zes cele oen besteling plassen cp de 
Begelen-pagra. Vanaf 500g leveern wij gratis aam huis bieren een 
veras) vans 10 kam vans onze enkel 


Hete a eam speciaal verzoek cf gewoon een vraag. dan mag v cr alijd 
bellen cf maden. De gaste gegevens vandt u bg Contact. Tot berrerikertt 


TEN 


MID Sommen tn nd Srl aha Omme brt nad 


Volgende keer 


In deel 2 van deze cursus, in Clickx 145, gaan we de 
andere pagina’s van de website invullen met lijstjes 
en formulieren. Daarnaast dompelen we ons ook 
onder in de wondere wereld van css, om de lay-out 
wat op te smukken. Experimenteer in tussentijd 
gerust wat verder! « 


Zo ziet onze site er uit na 
dit eerste deel. 
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